<script setup lang="ts">
import { getRequstListApi } from "../api/friendsShip";
import { useRequireListStore } from "../store/requireListStore";
import { onMounted, ref } from "vue";
import { getChatsRoomListApi } from "../api/chatsRoom";
import FriendsItem from "../components/friendsItem.vue";
import { useRouter } from "vue-router";

const router = useRouter();

const requireListStore = useRequireListStore();

const dataList = ref<IRequire[]>();

const getRequstList = () => {
  getRequstListApi().then((res) => {
    dataList.value = res.data;
    requireListStore.requireList = res.data;
    // console.log(res);
  });
};

const chatsRoomList = ref<IChats[]>();
const getChatsRoomList = () => {
  getChatsRoomListApi().then((res) => {
    chatsRoomList.value = res.data;
  });
};

onMounted(() => {
  getRequstList();
  getChatsRoomList();
});
</script>

<template>
  <div class="chats">
    <VanNavBar title="消息">
      <template #right>
        <van-icon
          @click="$router.push({ name: 'require' })"
          size="20"
          name="chat-o"
          :badge="dataList?.length"
        />
      </template>
    </VanNavBar>

    <div class="chats__list">
      <FriendsItem
        @click="
          () =>
            router.push({
              name: 'chatsDetail',
              params: { roomId: item.chatRoomId, roomName: item.chatRoom.name },
            })
        "
        v-for="item in chatsRoomList"
        :data="{
          name: item.chatRoom.name,
          type: item.chatRoom.type,
          id: item.chatRoom.id,
        }"
      />
    </div>
  </div>
</template>
